<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
<link rel="stylesheet" th:href="@{/plugins/cropper/cropper.css}" />
<style type="text/css">
#photo {
	max-width: 100%;
	max-height: 350px;
}

.img-preview-box {
	text-align: center;
}

.img-preview-box>div {
	display: inline-block;;
	margin-right: 10px;
}

.img-preview {
	overflow: hidden;
}

.img-preview-box .img-preview-lg {
	width: 150px;
	height: 150px;
}

.img-preview-box .img-preview-md {
	width: 100px;
	height: 100px;
}

.img-preview-box .img-preview-sm {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
</style>
</head>
<div th:fragment="div">
	<div class="modal fade" id="avatar" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title text-primary">
						<i class="fa fa-pencil"></i>
						更换头像
					</h4>
				</div>
				<div class="modal-body">
					<p class="tip-info text-center">未选择图片</p>
					<div class="img-container hidden">
						<img src="" alt="" id="photo">
					</div>
					<div class="img-preview-box hidden">
						<hr>
						<span>150*150:</span>
						<div class="img-preview img-preview-lg"></div>
						<span>100*100:</span>
						<div class="img-preview img-preview-md"></div>
						<span>30*30:</span>
						<div class="img-preview img-preview-sm"></div>
					</div>
				</div>
				<div class="modal-footer">
					<label class="btn btn-danger pull-left" for="photoInput"> <input type="file" class="sr-only" id="photoInput" accept="image/*"> <span>打开图片</span> <input
						id="imgData" name="imgData" class="hidden">
					</label>
					<button class="btn btn-primary disabled" onclick="sendPhoto();">提交</button>
					<button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>

	<script th:src="@{/plugins/cropper/cropper.js}"></script>
	<script type="text/javascript">
		/**头像更换**/
        var initCropperInModal = function(img, input, modal) {
	        var $image = img;
	        var $inputImage = input;
	        var $modal = modal;
	        var options = {
	            aspectRatio : 1, // 纵横比
	            viewMode : 2,
	            preview : '.img-preview' // 预览图的class名
	        };
	        // 模态框隐藏后需要保存的数据对象
	        var saveData = {};
	        var URL = window.URL || window.webkitURL;
	        var file;
	        var blobURL;
	        $modal.on('shown.bs.modal', function() {
		        // 重新创建
		        $image.cropper($.extend(options, {
			        ready : function() {
				        // 当剪切界面就绪后，恢复数据
				        if (saveData.canvasData) {
					        $image.cropper('setCanvasData', saveData.canvasData);
					        $image.cropper('setCropBoxData', saveData.cropBoxData);
				        }
			        }
		        }));
	        }).on('hidden.bs.modal', function() {
		        // 保存相关数据
		        saveData.cropBoxData = $image.cropper('getCropBoxData');
		        saveData.canvasData = $image.cropper('getCanvasData');
		        // 销毁并将图片保存在img标签
		        $image.cropper('destroy').attr('src', blobURL);
	        });
	        if (URL) {
		        $inputImage.change(function() {
			        var files = this.files;
			        if (!$image.data('cropper')) {
				        return;
			        }
			        if (files && files.length) {
				        file = files[0];
				        if (/^image\/\w+$/.test(file.type)) {
					        if (blobURL) {
						        URL.revokeObjectURL(blobURL);
					        }
					        blobURL = URL.createObjectURL(file);
					        // 重置cropper，将图像替换
					        $image.cropper('reset').cropper('replace', blobURL);
					        // 选择文件后，显示和隐藏相关内容
					        $('.img-container').removeClass('hidden');
					        $('.img-preview-box').removeClass('hidden');
					        $('#avatar .disabled').removeAttr('disabled').removeClass('disabled');
					        $('#avatar .tip-info').addClass('hidden');
				        } else {
					        window.alert('请选择一个图像文件！');
				        }
			        }
		        });
	        } else {
		        $inputImage.prop('disabled', true).addClass('disabled');
	        }
        }

        var sendPhoto = function() {
	        // 得到PNG格式的dataURL
	        var photo = $('#photo').cropper('getCroppedCanvas', {
	            width : 100,
	            height : 100
	        }).toDataURL('image/png');

	        var photoFormData = new FormData();
	        photoFormData.append("imgData", photo);

	        $.ajax({
	            type : 'POST',
	            url : ctx + 'sys/user/uploadImg', // 要上传的地址
	            data : photoFormData,
	            cache : false,
	            contentType : false,
	            processData : false,
	            success : function(data) {
		            if (data.success == true) {
			            // 将上传的头像的地址填入，为保证不载入缓存加个随机数
			            $('#user-avatar').attr('src', ctx + data.msg + '?t=' + Math.random());
			            $('#avatar').modal('hide');
		            } else {
			            alert(data.msg);
		            }
	            }
	        });
        }

        $(function() {
	        initCropperInModal($('#photo'), $('#photoInput'), $('#avatar'));
        });
	</script>
</div>
</html>